<template>
	<view style="padding-bottom: 3vw;">
		<!-- <block v-for="(item, index) in data" :key="index">
			<view class="bank_box" @click="address(item.id)">
				<image  class="bg01" src="../../../static/bank/bank_bg01.png" mode="widthFix"></image>
				<image v-if="item.name == '农业银行'" class="bg01" src="../../../static/bank/bank_bg02.png" mode="widthFix"></image>
				<image v-if="item.name == '工商银行'" class="bg01" src="../../../static/bank/bank_bg03.png" mode="widthFix"></image>
				<image v-if="item.name == '建设银行'" class="icon" src="../../../static/bank/bank01.png" mode="widthFix"></image>
				<image v-if="item.name == '农业银行'" class="icon" src="../../../static/bank/bank02.png" mode="widthFix"></image>
				<image v-if="item.name == '工商银行'" class="icon" src="../../../static/bank/bank03.png" mode="widthFix"></image>
			<view class="name">{{item.bank_name}}</view>
			<view class="num">{{item.card}}</view>
			</view>
		</block>
		
		<view class="text_box" data-url="/pages/personal/bank/addbank" @click="gotopage">添加银行卡</view>
		 -->
		 
		 
		<!-- <view class="bank_box">
			<view class="name"><label class="iconfont b_icon icon_wx">&#xe607;</label>微信（收款信息）</view>
			<view class="input_box">
				<view class="i_tit">收款账号：</view>
				<input class="i_input" type="text" v-model="wx_account">
			</view>
			<view class="input_box" @tap="openImg1">
				<view class="i_tit">收款码：</view>
				<view class="i_img">
					<image class="img"  :src="s1"></image>
				
				</view>
			</view>
		</view> -->
		<view class="bank_box">
			<view class="name"><label class="iconfont b_icon icon_ali">&#xe68a;</label>支付宝</view>
			<view class="input_box">
				<view class="i_tit">姓名：</view>
				<input class="i_input" type="text" v-model="ali_name">
			</view>
			<view class="input_box">
				<view class="i_tit">支付宝账号：</view>
				<input class="i_input" type="text" v-model="ali_account">
			</view>
			<view class="btn"  @click="login1">保存信息</view>
		</view>

		</view>
		
		<!-- <view class="text_box" @click="login">保存信息</view> -->
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '../../../common/image-tools.js'
	import Cfg from '../../../common/config.js';
export default {
	data() {
		return {
			data: '',
				fff: true,
			wx_account:'',
			id_no:'',
			ali_name:'',
			ali_account:'',
			bank_name:'',
			card_name:'',
			card_phone:'',
			card_account:'',
			s1:'../../../static/add_img.png',
			s11:'',
			s2:'../../../static/add_img.png',
			s22:'',
			card_no:'',
			name:'',
			
			b_index:0,
			b_array:['工商银行-借记卡','中信银行-借记卡','上海银行-借记卡','光大银行-借记卡','民生银行-借记卡','平安银行-借记卡','交通银行-借记卡','广发银行-借记卡','建设银行-借记卡','浦发银行-借记卡','邮储银行-借记卡']
		};
	},
	
	onShow() {
	var that = this;
	that.Net._get('myData',{},(res)=>{
		if(res.code ==1){
		if(res.data.sm_z)
		{
						 that.s1= Cfg.Setting.img+res.data.sm_z
						  that.s11=res.data.sm_z
		}
		if(res.data.sm_f)
		{
						
						that.s2= Cfg.Setting.img+res.data.sm_f 
						that.s22=res.data.sm_f 
		}
		   that.wx_account=res.data.wx
		    that.ali_account=res.data.zfb
			  that.ali_name=res.data.zfb_name
		that.bank_name=res.data.bank_type
			that.id_no=res.data.sm_card
		 that.card_name=res.data.bank_name
		 that.card_phone=res.data.bank_phone
		 that.card_account=res.data.bank_card
		 let b_array =['工商银行-借记卡','中信银行-借记卡','上海银行-借记卡','光大银行-借记卡','民生银行-借记卡','平安银行-借记卡','交通银行-借记卡','广发银行-借记卡','建设银行-借记卡','浦发银行-借记卡','邮储银行-借记卡'];
		console.log(that.bank_name)
		 b_array.map((item,index)=>{
		 	if(item == that.bank_name)
		 	that.b_index = index;
		 })
		}
	});
	
	},
	methods: {
		bankChange(e){
			 this.b_index = e.detail.value
		},
		login() {
			var that = this;
		
			 //其中一个填写就一定要全部填写
			 if(that.bank_name != '' || that.card_name != '' || that.card_phone != '' || that.card_account != ''){
				 if(!that.bank_name || !that.card_name || !that.card_phone || !that.card_account || !that.id_no || !that.s11 ||  !that.s22){
					 that.Msg.Fail('请输入完整信息');
					 return;
				 }
			 }
			that.fff=false
				that.Net._get('uppay_new',{bank_type:that.b_array[that.b_index],bank_name:that.card_name,bank_card:that.card_account,bank_phone:that.card_phone,sm_name:that.id_no,s1:that.s11,s2:that.s22,},(res)=>{
						
					if(res.code ==1){
					that.fff=true
						that.Msg.Success('提交成功',(res)=>{
						//that.Nav._to({url:'/pages/personal/personal',type:2})
						})
					}
				});
				that.fff=true
		},
		login1() {
			var that = this;
		
			 //其中一个填写就一定要全部填写
			
				 if(!that.ali_name || !that.ali_account){
					 that.Msg.Fail('请输入完整信息');
					 return;
				 }
			 
			
				that.Net._get('uppay1',{ali_name:that.ali_name,ali_account:that.ali_account},(res)=>{
					if(res.code ==1){
					
						that.Msg.Success('提交成功',(res)=>{
						//that.Nav._to({url:'/pages/personal/personal',type:2})
						})
					}
				});
				
		},
		address(id){
			uni.navigateTo({
				url:'/pages/personal/bank/addbank?id='+id
			})
		},
		gotopage(e){
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url:url
			})
		},
		openImg1() {
			let me = this;
			//console.log('用户点击确定');
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: function(chooseImageRes) {
					const tempFilePaths = chooseImageRes.tempFilePaths
					pathToBase64(tempFilePaths[0]).then(base64 => {
						me.Net._post('upAvatara1',{avatar:base64,t:1},(res)=>{
							if(res.code ==1){
							me.s1=Cfg.Setting.img+res.data
							me.s11=res.data	
							}
						});
					})
					.catch(error => {
					});			
				}
			});
			
		
		},
		openImg2() {
			let me = this;
			//console.log('用户点击确定');
			uni.chooseImage({
				count: 1, //默认9
				
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: function(chooseImageRes) {
					const tempFilePaths = chooseImageRes.tempFilePaths
					pathToBase64(tempFilePaths[0]).then(base64 => {
											 
						me.Net._post('upAvatara1',{avatar:base64,t:2},(res)=>{
							if(res.code ==1){
							me.s2=Cfg.Setting.img+res.data
							me.s22=res.data
							}
						});
					})
					 .catch(error => {
					});
									
				}
			});
		},	
		
	}
};
</script>

<style lang="scss">
page {
	padding-top: 20px;
	background-color: #f8f8f8;
}
.bank_box {
	width: 92%;
	margin: 0 auto;
	position: relative;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	background: #fcfcfc;
	padding: 30rpx;
	box-shadow: 5rpx 5rpx 10rpx 5rpx #dfdfdf;
}

.bank_box .bg01 {
	width: 100%;
}

.bank_box .icon {
	width: 24px;
	position: absolute;
	left: 12px;
	top: 20px;
}

.bank_box .name {
	font-size: 32rpx;
	display: flex;
	align-items: center;
	color: #6d6d6d;
	.b_icon{
		font-size: 50rpx;
		margin-right: 20rpx;
	}
	.icon_wx{
		color: #28C445;
	}
	.icon_ali{
		color: #02A9F1;
	}
	.icon_bank{
		color: #0055ff;
	}
}
.input_box{
	width: 100%;
	padding-top: 25rpx;
	display: flex;
	align-items: center;
	.i_tit{
		width: 180rpx;
		font-size: 28rpx;
		color: #343434;
	}
	.i_input{
		flex: 1;
		height: 10vw;
		line-height: 10vw;
		padding: 0 25rpx;
		background: #f4f4f4;
		border-radius: 10rpx;
	}
	.i_img{
		width: 20vw;
		height: 20vw;
		border-radius: 10rpx;
		overflow: hidden;
		.img{
			width: 100%;
			height: 100%;
		}
	}
}

.bank_box .num {
	font-size: 14px;
	color: #ffdede;
	position: absolute;
	left: 12px;
	bottom: 15px;
}

.bank_box .btn{
	width: 60%;
	font-size: 33rpx;
	color: #fff;
	text-align: center;
	background: #4d726f;
	border-radius: 50rpx;
	padding: 20rpx 0;
	margin-top: 50rpx;
	margin-left: 20%;
}

.text_box{
	width: 92%;
	margin: 50rpx auto;
	height: 50px;
	line-height: 50px;
	font-size: 35rpx;
	color: #fff;
	text-align: center;
	background: #4d726f;
	border-radius: 50rpx;
}

.content{
  width: 100%;
  margin-top: 10px;
  background-color: #fff;
  padding-bottom: 10px;
}

.content .title{
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #333;
  text-indent: 16px;
}

.content .img01{
  padding: 20px 0;
  width: calc(100% - 32px);
  margin-left: 16px;
  background: #f5f5f5;
  text-align: center;
}

.content .img01 image{
  width: 30%;
}

.content .menu{
  width: calc(100% - 32px);
  margin-left: 16px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  color: #fff;
  background-color: #4d726f;
  border-radius: 0 0 10px 10px;
}

.content .sfz_box{
  width: calc(100% - 32px);
  margin-left: 16px;
  display: flex;
}

.content .sfz_box .sfz{
  width: calc(50% - 8px);
  background-color: #f5f5f5;
  text-align: center;
}

.content .sfz_box .sfz:nth-child(1){
  margin-right: 16px;
}

.content .sfz_box .sfz image{
  width: 70%;
  height: 80px;
  margin: 10px 0 5px 0;
}

.content .sfz_box .sfz .menu02{
  width: 100%;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  color: #fff;
  background-color: #4d726f;
  border-radius: 0 0 10px 10px;
}
</style>
